<template>
	<view :style="{'--colors':colorVal}">
		<view class="row a-center padding30 bgwhite">
			<view class="iconfont icon-remen size36 color"></view>
			<text class="color size32 bold m-left10">热门话题</text>
		</view>

		<scroll-view scroll-x="true" class="bgwhite topic nowrap rows p-bot30 m-bot20">
			<view class="topic_list d-inline-block wrap" v-for="(item,index) in classif" :key="index">
				<view class="row f-column">
					<block v-for="(subItem,subIndex) in item" :key="subIndex">
					<view class="row f-nowrap a-center sation" @click="toUrl(`/otherPage/forum/theme?classifyid=${subItem.classifyid}`)">
						<text class="leftTip flexac white h6 m-right14">#</text>
						<text class="flex-1 ellipsis color_33 size30">{{subItem.name}}</text>
					</view>
					</block>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name: 'topic',
		props: ['pageData'],
		data() {
			return {
				classif: [],
			}
		},
		methods: {

		},
		computed: {
			...mapState(['colorVal']),
		},
		watch: {
			pageData:{
				deep:true,
				immediate:true,
				handler(newVal, oldVal){
					if (!newVal || !newVal.length) return;
					let num = Math.ceil(newVal.length / 4);
					for (let i = 0; i < num; i++) {
						let obj = [];
						num-1 != i?obj = newVal.slice(i*4,(i+1)*4):obj = newVal.slice(i*4)
						this.classif.push(obj)
					}
				}
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.topic {
		height: 300rpx;
	}

	.topic_list {
		width: 360rpx;
		margin-left: 30rpx;
		margin-right: 50rpx;
		height: 100%;
	}

	.leftTip {
		width: 32rpx;
		height: 32rpx;
		background-color: var(--colors);
		border-radius: 50%;
		overflow: hidden;
	}

	.sation {
		margin-bottom: 30rpx;
	}

	.sation:last-child {
		margin-bottom: 0;
	}
</style>
